import React from "./react";
import ReactDOM from "./react-dom";

class ClassComponent extends React.Component {
    render() {
        return <h1 style={this.props.style}>hello {this.props.name}</h1>;

        // babel ==> createElement
        // return React.createElement(
        //     "h1",
        //     { style: this.props.style },
        //     "hellow rootElement",
        //     this.props.name
        // );
    }
}

const rootElement = <ClassComponent name="aaaa" style={{ color: "red" }}></ClassComponent>;
// 1 babel ==> ClassComponent
// React.createElement(ClassComponent, { name="aaaa" style={{ color: "red" } });

// 2 ClassComponent ==> vdom
// $$typeof: Symbol(react.element)
// key: null
// props: {name: 'aaaa', style: {…}}
// ref: null
// type: class ClassComponent

ReactDOM.render(rootElement, document.getElementById("root"));

// 核心思路
// 通过new Class()的render执行拿到最终的createElement产生的vNode
// createDom ==> 转成真实的dom
// 处理Class组件
// function mountClassComponent(dom) {
//     let { type, props } = dom;
//     let classInstance = new type(props);
//     let classVnode = classInstance.render();
//     classInstance.oldReaderVnode = classVnode;
//     return createDom(classVnode);
// }
